<template>
  <div>
    <el-row>
      <el-dialog v-dialogDrag :visible.sync="visible" :title="title" center :width="width">
        <el-form
          :model="form"
          size="mini"
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
<!--          :readonly="type === 2"-->
          <el-form-item label="菜单类型" prop="menuType" >
            <el-select v-model="form.menuType" :placeholder="rules.menuType[0].message">
              <el-option
                v-for="(item,i) in menuType"
                :key="i"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单名" prop="title">
            <el-input v-model="form.title" :placeholder="rules.title[0].message"></el-input>
          </el-form-item>
          <el-form-item label="菜单父ID">
            <el-input v-model="form.fatherId" readonly></el-input>
          </el-form-item>
          <el-form-item label="菜单标识" prop="menuName">
            <el-input v-model="form.menuName" :placeholder="rules.menuName[0].message"></el-input>
          </el-form-item>
          <el-form-item label="跳转路径" prop="path">
            <el-input v-model="form.path" :placeholder="rules.path[0].message"></el-input>
          </el-form-item>
          <el-form-item label="菜单等级" prop="level" >
            <el-input v-model="form.level" placeholder="请输入菜单等级" readonly></el-input>
          </el-form-item>
          <el-form-item label="菜单图标" prop="icon">
            <iconSelector v-model="form.icon"></iconSelector>
          </el-form-item>

          <el-form-item label="菜单排序" prop="realOrder">
            <el-input v-model="form.realOrder" placeholder="请输入菜单排序"></el-input>
          </el-form-item>

          <el-form-item label="菜单状态" prop="menuState">
            <el-radio-group v-model="form.menuState" placeholder="请选择菜单状态">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span class="dialog-footer" slot="footer" style="text-align: right!important;">
          <el-button size="mini" @click="visible = false">取 消</el-button>
          <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
          <el-button size="mini" @click="save" type="primary">保 存</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import iconSelector from "_c/IconSelector/index";
import { SYSTEM } from "@/api";

export default {
  components: {
    iconSelector
  },
  props: {
    show: { Boolean, default: false },
    value: { Object, default: {} },
    width: { String, default: "50%" },
    title: { String, default: "title" },
    type: {Number,default: 0} // 0 新增 1 编辑 2 查看
  },
  data() {
    return {
      menuType: [
        {
          label: "目录",
          value: 0
        },
        {
          label: "菜单",
          value: 1
        },
        {
          label: "按钮",
          value: 2
        }
      ],
      form: { menuState: 1},
      rules: {
        title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        path: [{ required: true, message: "请输入跳转路径", trigger: "blur" }],
        menuType: [
          { required: true, message: "请选择菜单类型", trigger: "blur" }
        ],
        menuName: [
          { required: true, message: "请输入按钮标识", trigger: "blur" }
        ],
        realOrder: [
          { required: true, message: "请输入排序", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", false);
      }
    }
  },
  mounted() {
    this.setOldData(this.value);
  },
  watch: {
    "form.menuType"(val) {
        if (val === 2 || val === 0) {
          this.rules.path[0].required = false
          // if (val === 2) {
          //   this.rules.menuName[0].required = true;
          // } else {
          //   this.rules.menuName[0].required = false;
          // }
        } else {
          this.rules.path[0].required = true
          // this.rules.menuName[0].required = false;
        }
    }
  },
  methods: {
    setOldData(data) {
      this.form = this.$newObject(data);
    },
    save() {
      if (this.$validate(this, "ruleForm")) {
        SYSTEM.saveMenu(this.form).then(res => {
          if (res.code === 200) {
            this.$message.success("保存成功");
            this.$emit('refresh')
          } else {
            this.$message.error(res.message);
          }
          this.$emit("update:show", false);
        });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.setOldData(this.value);
    }
  }
};
</script>
<style lang="scss" scoped>
.small-card {
  ::v-deep .el-card__body {
    padding: 10px;
  }
}

.el-form {
  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }
}
</style>
